<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活跃统计</el-breadcrumb-item>
      <el-breadcrumb-item>活跃统计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="card">
        <el-alert
    :title='t'
    type="success" :closable="false">
    </el-alert>
    <el-alert
    :title='t1'
    type="success" :closable="false">
  </el-alert>
      <div
        id="main"
        style="width:50%;height:400px;"
        ref="main"
      ></div>
     <div class="circ" id="circ" ref="circ">

     </div>
    </el-card>
    <!-- <el-button type="primary" @click="getadd">统计{{n}}</el-button> -->
  </div>
</template>
<script>
//import _ from 'lodash'
import axi from '../utils/text.js'
import $ from 'jquery'
import echarts from 'echarts'
export default {
  data() {
    return {
      n: '',
      list: [],
      day: null,
      t: '',
      t1: ''
    }
  },
  created() {
    this.getList()
    this.getechert()
    // this.jsonpgz()
  },
  methods: {
    getList() {
      var data1 = '005063'
      $.ajax({
        type: 'get',
        async: false,
        url: `http://fundgz.1234567.com.cn/js/${data1}.js`,
        data: {
          rt: +new Date()
        },
        dataType: 'jsonp',
        jsonp: 'callback', //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
        jsonpCallback: 'jsonpgz', //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
        success: function(req) {
          console.log(req.name)
          this.n = req.name
        },
        error: function() {
          alert('fail')
        }
      })
    },
    getadd() {
      var data1 = '005063'
      //http://fund.eastmoney.com/pingzhongdata/005063.js?v=20200401230120
      this.$http.jsonp('http://fundgz.1234567.com.cn/js/005063.js', { jsonpCallback: 'jsonpgz' }).then(res => {
        console.log(res.body)
        this.n = res.body.name
      })
      //http://fund.eastmoney.com/pingzhongdata/005063.js
      //http://fund.eastmoney.com/pingzhongdata/005063.js?v=20200401230120
      //   this.$http.jsonp('http://fund.eastmoney.com/pingzhongdata/005063.js',{jsonpCallback:'jsonpgz'}).then(res=>{
      //       console.log(res.bodyText,'股票')
      //   }).catch(err=>{
      //       console.log(err)
      //   })
      //   $.ajax({
      //       type:"get",
      //      async:false,
      //       url:`http://fund.eastmoney.com/pingzhongdata/005063.js`,
      //       data:{
      //           v:20200401230120
      //       },
      //       dataType:'jsonp',
      //      jsonp: "callback",
      //      jsonpCallback:'Data_netWorthTrend ',
      //       success:function(response){
      //           console.log(response,'没有数据吗')
      //       },
      //       error:function(err){
      //           console.log(err,'没有东西吗')
      //       }
      //   })
    },
    getmounted() {
      //   var myChart=echarts.init(this.$refs.main1)
      //   var opacity={
      //       title:{
      //           text:'基金图',
      //           left:'center'
      //       },
      //       backgroundColor:'#fff',//1e90ff
      //       visualMap:{
      //             pieces:[{
      //                 gt:-50,
      //                 lte:0,
      //                 color:'#096'
      //             },{
      //                 gt:0,
      //                 lte:99,
      //                 color:'red'
      //             }]
      //         },
      //       xAxis:{
      //            axisLabel:{
      //                 color:'red',
      //                 fontSize:'12',
      //             },
      //             boundaryGap: false,//让数据紧贴y轴
      //             //x轴线的显示和隐藏
      //             axisLine:{
      //                 show:false
      //             },
      //             axisTick:{
      //                 show:false
      //             },
      //             type: 'category',//表示是x轴的数据
      //             splitLine: {
      //     show: false,//网格显示
      // },
      //           data:['1','2','3','4','5','6'],
      //       },
      //       yAxis:{
      //           axisLine:{
      //                 //y轴线的样式颜色
      //                 lineStyle:{
      //                     color:'red'
      //                 },
      //                // show:true
      //             },
      //             //Y轴分割线样式
      //             splitLine:{
      //                 lineStyle:{
      //                     color:'orange'
      //                 }
      //             },
      //             //刻度隐藏
      //             axisTick:{
      //                 show:false
      //             },
      //             //文字颜色
      //             axisLabel:{
      //                 color:'#fff'
      //             },
      //           type:'value'
      //       },
      //       series:[{
      //             name: '日线',
      //             type: 'line',
      //             smooth:true,//指示线是否平滑
      //            symbol:'circle',//节点圆圈样式
      //            symbolSize:8,//节点圆圈阴影
      //            showSymbol:false,//显示隐藏
      //            itemStyle:{
      //                color:'#0184d5',
      //                borderColor:"rgba(221,220,107,.1)",
      //                borderWidth:12
      //            },
      //             data: ['-1','-3','3','5','6']
      //                 // data: [2, 3, 5, 6, 4, 3, 8, 2, 1]
      //         },{
      //             type: 'line',
      //             name: '月线',
      //             smooth: true,
      //             data: [-8,-2,-1,1,3, 2],
      //             lineStyle: {
      //                 normal: {
      //                     opacity: 0.5
      //                 }
      //             }
      //         }],
      //          tooltip: {
      //             axisPointer: {
      //                 type: 'line',//line为线性shados为方块
      //                 axis: 'auto',
      //                 snap: true,
      //                 animation: true,
      //                 Z: 12
      //             },
      //             showContent: true,
      //             show: true,
      //             trigger: 'item',//axis为坐标线item为线性
      //             renderMode: 'html',
      //             transitionDuration: 1,
      //            // triggerOn:'click',
      //            color:'red',
      //            textStyle:{
      //              //  color:'red'
      //            },
      //             formatter: function(params) {
      //                 console.log(params)
      //                 if(params.value<0){
      //                     return `<span style="color:#99CC66">${params.value}%</span>`
      //                 }else{
      //                     return `<span style="color:red">+${params.value}%</span>`
      //                 }
      //               // return `${params.value<0?params.value:'+'+params.value}%<span style="color:orange">黄色</span>`
      //                // return `涨幅${params.value<0?params.value:'+'+params.value}</br>名称${params.name}`
      //             }
      //         },
      //   }
      //   myChart.setOption(opacity)
    },
    async getechert() {
      const { data: data } = await axi.getecharts()
      //   res.data.message.forEach(item=>{
      //       if(item.total){
      //           this.day.push(item.datanum)
      //          // console.log(item.total+=item.total)
      //           this.list.push(item.total)
      //       //  this.list= item.total++
      //       }
      //   })
      // console.log(_)
      //   _.merge(data.message,this.list)
      data.message.forEach(item => {
        if (item.total) {
          console.log(item)
          this.day += item.datanum
          //this.day=(item.datanum++)
          // console.log(item.total+=item.total)
          this.list.push(item.total)
        }
      })
      console.log(data)
      console.log(this.list, this.day)
      this.t = !this.day ? `今日访问人数：1` : `今日访问人数：${this.day}`
    }
  },
  mounted() {
    var myCirc=echarts.init(this.$refs.circ) 
    var myChart = echarts.init(this.$refs.main)
    var options = {
      legend: {
        data: ['日活跃', '总活跃'],
        textStyle: {
          color: 'red'
        },
        right: '10%'
      },
      title: {
        text: '用户统计图',
        subtext: '日活量统计图',
        left: '40%',
        x: 'center',
        top: '1%',
        textStyle: {
          fontSize: 24,
          color: '#11264f'
        },
        subtextStyle: {
          color: '#2D527C',
          fontSize: '14',
          fontWeight: 'bold'
        }
      },

      backgroundColor: '#87cefa',
      // series: [{
      //     type: 'bar3D',
      //     // shading: 'lambert',
      //     // encode: {
      //     //     x: 'Year',
      //     //     y: 'Country',
      //     //     z: 'Life Expectancy',
      //     //     tooltip: [0, 1, 2, 3, 4]
      //     // }
      // }]
      //设置数据分类的样式#0000CD #e0861a
      visualMap: {
        pieces: [
          {
            gt: 0,
            lte: 10,
            color: '#0000CD'
          },
          {
            gt: 10,
            lte: 999,
            color: '#ffc20e'
          }
        ]
      },
      xAxis: {
        //设置x轴的样式
        axisLabel: {
          color: 'red',
          fontSize: '12'
        },
        axisLine: {
          lineStyle: {
            color: '#green'
          }
        },
        boundaryGap: false, //让数据紧贴y轴
        //x轴线的显示和隐藏
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        type: 'category', //表示是x轴的数据
        splitLine: {
          show: false //网格显示
        },
        data: ['总活跃量']
        //'1号', '2号', '3号', '4号', '5号', '6号'
      },
      yAxis: {
        axisLine: {
          //y轴线的样式颜色
          lineStyle: {
            color: '#333'
          }
          // show:true
        },
        axisTick: {
          lineStyle: {
            color: '#ccc'
          }
        },
        //Y轴分割线样式
        splitLine: {
          lineStyle: {
            color: 'orange',
            type: 'dashed'
          }
        },
        //刻度隐藏
        axisTick: {
          show: false
        },
        //文字颜色
        axisLabel: {
          color: '#fff'
        },
        //    name: '数据',
        type: 'value' //表示是Y轴的数据
        // data: ['-3','-2','-1','0','1', '2', '3', '4', '5', '6', '7', '8'],
      },
      series: [
        //     {
        //     name: '日线',
        //     type:'bar',
        //     barWidth:30,
        //    // type: 'line',
        //     smooth:true,//指示线是否平滑
        //    symbol:'circle',//节点圆圈样式
        //    symbolSize:8,//节点圆圈阴影
        //    showSymbol:false,//显示隐藏
        //    itemStyle:{
        //        color:'#0184d5',
        //        borderColor:"rgba(221,220,107,.1)",
        //        borderWidth:12
        //    },

        //    data: [this.n]
        //         // data: [2, 3, 5, 6, 4, 3, 8, 2, 1]
        // },
        {
          name: '日活跃',
          type: 'bar',
          barWidth: 40,
          data: this.day,
          itemStyle: {
            normal: {
              color: '#0000CD'
            },
            emphasis: {
              //  barBorderRadius: 30,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
          // data:[2]
          // data: JSON.parse(JSON.stringify(this.list))
        },
        {
          type: 'bar',
          name: '总活跃',
          smooth: true,
          barWidth: 30,
          //  data:[6],
          data: this.list,
          // data: [1,3, 2],
          lineStyle: {
            normal: {
              // opacity: 0.2
            },
            emphasis: {
              //   barBorderRadius: 30,
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ],
      //下载
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      //网格布局
      grid: {
        left: '5%',
        containLabel: true //显示隐藏y轴坐标刻度
      },
      //设置鼠标移入的样式
      tooltip: {
        axisPointer: {
          type: 'line', //line为线性shados为方块
          axis: 'auto',
          snap: true,
          animation: true,
          Z: 12
        },
        showContent: true,
        show: true,
        trigger: 'item', //axis为坐标线item为线性
        renderMode: 'html',
        transitionDuration: 1,
        // triggerOn:'click',
        color: 'white',
        textStyle: {
          //  color:'red'
        },
        formatter: function(params) {
          // console.log(params)
          //   console.log(params)
          return `${params.seriesName}总量:${params.data}`
          // if(params.value<0){
          //     return `<span style="color:#99CC66;background:#fff">${params.value}%</span>`
          // }else{
          //     return `<span style="color:red">+${params.value}%</span>`
          // }
          // return `${params.value<0?params.value:'+'+params.value}%<span style="color:orange">黄色</span>`
          // return `涨幅${params.value<0?params.value:'+'+params.value}</br>名称${params.name}`
        }
      }
    }
    var options1={
          backgroundColor: '#2c343c',

    title: {
        text: '活跃用户',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },

    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },

    visualMap: {
        show: false,
        min: 1,
        max: 150,
        inRange: {
            colorLightness: [0, 1]
        }
    },
      color : [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],
    series: [
        {
            name: '总访问量',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
                {value: 100, name: '日访问量'},
                {value: 222, name: '周访问量'},
                {value: 250, name: '月访问量'},
                {value: 400, name: '总访问量'},
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                //  color:'#c23531'
                color: 'rgba(255, 255, 255, 0.3)'
            },
            labelLine: {
                lineStyle: {
                    // color:'#c23531'
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                emphasis : {
                    shadowBlur : 20,
                    shadowOffsetX : 0,
                    shadowColor : 'rgba(0, 0, 0, 0.5)'
                }
                // color: '#c23531',
                // shadowBlur: 10,
                // shadowColor:'#c23531'
                // shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
    }
    setTimeout(() => {
      console.log(this.list, [this.day], options)
      options.series[0].data = [!this.day ? 1 : this.day]
      options.series[1].data = [this.n]
    options1.series[0].data[0].value=!this.day?1:this.day
    options1.series[0].data[1].value=!this.day?1:this.day +10
    options1.series[0].data[2].value=!this.day?1:this.day +20
    options1.series[0].data[3].value=this.n
      myChart.setOption(options)
      myCirc.setOption(options1)
    }, 1000)
    window.addEventListener('resize', function() {
      myChart.resize()
    })

    this.getmounted()
  },
  watch: {
    list() {
      this.n = this.list.reduce((a, b) => {
        return a + b
      })
      this.t1 = `总访问量：${this.n}`
    }
  },
  computed: {
    //   list1:function(){
    //       this.list.reduce((a,b)=>{
    //           return a+b
    //       })
    //   }
  }
}
</script>
<style lang="less" scoped>
.card{
    position: relative;
    // width: 100vw;
    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    #main{
        // flex: 1;
        // width: 50%;
    }
    .circ{
        position: absolute;
        right: 0;
        top: 17%;
        //flex: 1;
        height: 400px;
        width: 45%;
        z-index: 5;
        // background-color: orange;
    }
}
</style>